<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<c:url value="/" var="baseUrl" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="img/favicon.png">
<title>山东电信宽带异常分析助手</title>
<%@include file="../include/css.jsp"%>
</head>

<body>


	<!-- container section start -->
	<section id="container" class=""> 
		<%@include file="../include/header.jsp"%>
		<%@include file="../include/sidebar.jsp"%>
		
	<section id="main-content"> 
		<section class="wrapper"> <!--overview start-->

	<!--/.row--> <!--/.row--><!-- Today status end --><!-- statics end -->
	<!--主显示区域--开始-->
	<table width="291" border="0" align="center">
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div id="main" style="height: 400px"></div>
	</table>
	<input type="hidden" name="min" value="${min}" />
	<br>
	<br>
	<!-- project team & activity end --> <!--主显示区域--结束--> </section> </section> <!--main content end-->
	</section>
	<!-- container section start -->
	
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> 
    <%@include file="../include/scripts.jsp"%>
    <script type="text/javascript" src="${baseUrl}layer-v3.0.3/layer/layer.js"></script> 
    <!-- ECharts单文件引入 -->
    <script src="${baseUrl}js/echart/echarts.js"> </script>
    <script>
    /*
        ;!function(){  
            layer.config({//加载扩展模块  
                extend: 'extend/layer.ext.js'  
            });  
            layer.ready(function(){   
            });  
        }();  
        */  
        function ityzl_SHOW_LOAD_LAYER(){  
            return layer.msg('努力计算中，请稍候...', {icon: 16,shade: [0.5, '#f5f5f5'],scrollbar: false,offset: '430px', time:100000}) ;  
        }  
        function ityzl_CLOSE_LOAD_LAYER(index){  
            layer.close(index);  
        }  
        function ityzl_SHOW_TIP_LAYER(){  
            layer.msg('恭喜您，加载完成！',{time: 1000,offset: '10px'});  
        }  
    </script> 
	
	
	
	<script>
	
    $.ajax({  
        type: "post",  
        dataType: "json", 
        url: "${baseUrl}json/JsonScatter",  
        beforeSend: function () {  
            i = ityzl_SHOW_LOAD_LAYER();  
        },  
        success: function (jdata) {  
            ityzl_CLOSE_LOAD_LAYER(i);
            
            // 绘图函数开始
            require.config({
                paths : {
                    echarts : '${baseUrl}js/echart'
                }
            });

            // 使用
            require([ 'echarts', 'echarts/chart/scatter' // 使用柱状图就加载bar模块，按需加载
            ], function(ec) {
                //console.log("12jlaksdj");
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main'));
                
                //var ecConfig = require('echarts/config'); 
                 
                //myChart.on(ecConfig.EVENT.CLICK, eConsole); 
                option = {
                		title : {
                	        text: '宽带流量分布',
                	        subtext: '数据来源AAA系统'
                	    },
                    tooltip : {
                        trigger : 'item'
                    },
                    toolbox : {
                        show : true,
                        feature : {
                            mark : {
                                show : true
                            },
                            dataZoom : {
                                show : true
                            },
                            dataView : {
                                show : true,
                                readOnly : false
                            },
                            restore : {
                                show : true
                            },
                            saveAsImage : {
                                show : true
                            }
                        }
                    },
                    dataRange : {
                    	
                        min : jdata.minAvgFlow,
                        max : jdata.maxAvgFlow,
                        y : 'center',
                        text : [ '高', '低' ], // 文本，默认为数值文本
                        color : [ 'lightgreen', 'yellow' ],
                        calculable : true
                    },
                    xAxis : [ {
                    	name:'上网天数',
                        type : 'value',
                        scale : true
                    } ],
                    yAxis : [ {
                    	name:'总流量/G',
                        type : 'value',
                        position : 'right',
                        scale : true
                    } ],
                    animation : false,
                    series : [ {
                        name : '上网天数,总流量,日平均流量',
                        type : 'scatter',
                        symbolSize : 5,
                        data : jdata.jsonArray
                    } ]
                };
                //console.log(option);
                // 为echarts对象加载数据 
                myChart.setOption(option);
            });
            // 绘图函数结束
            
            ityzl_SHOW_TIP_LAYER(); 
        },  
        error: function (e, jqxhr, settings, exception) {  
            ityzl_CLOSE_LOAD_LAYER(i);  
        }  
    });  
	
	</script>
	<script>
$("#sidebarMyChart").removeClass('active');
$("#sidebarListSameMac").removeClass('active');
$("#sidebarListAvgFlow").removeClass('active');
$("#sidebarScatter").addClass('active');
$("#sidebarListSigData").removeClass('active');
$("#sidebarListTop10").removeClass('active');
$("#sidebarListAccount").removeClass('active');
$("#sidebarBWListAdmin").removeClass('active');
$("#sidebarListDoc").removeClass('active');
$("#sidebarListUser").removeClass('active');
</script>
</body>
</html>
